<template>
    <div style="width: 100%;position: relative;height: 100%;">
        <div id="search">
            <el-row>
                <el-form :model="listQuery" :label-position="labelPosition" :inline="true" ref="formQuery"
                         label-width="40px">
                    <el-col :span="6">
                        <el-form-item label="账号" prop="username">
                            <el-input size="small" style="width: 80%" v-model="listQuery.username" placeholder="请输入账号"
                                      clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="角色" prop="roleId">
                            <el-select size="small" style="width: 80%" v-model="listQuery.roleId" placeholder="请选择角色"
                                       clearable>
                              <el-option label="管理员" value="1"></el-option>
                              <el-option label="药房工作人员" value="2"></el-option>
                              <el-option label="药品管理人员" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item style="float: right">
                            <el-button size="small" type="success" icon="el-icon-plus" @click="handleAdd"></el-button>
                            <el-button size="small" type="primary" icon="el-icon-search" @click="search"></el-button>
                            <el-button size="small" @click="resetQuery('formQuery')">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>

        </div>
        <div id="table">
            <el-table border :data="list" style="width: 100%" v-loading="loading">
                <el-table-column type="index" width="65" label="#序号" align="center"/>
                <el-table-column prop="username" width="190" label="用户名" align="center"/>
                <el-table-column prop="phone" label="电话" width="130" align="center"/>
                <el-table-column prop="roleName" label="角色" width="130" align="center"/>
                <el-table-column prop="title" label="职称"  width="130" align="center"/>
                <el-table-column prop="number" label="工号"  width="180" align="center"/>
                <el-table-column prop="age" label="年龄"  width="130" align="center"/>
                <el-table-column label="操作" >
                    <template slot-scope="scope" v-if="scope.row.status == 1? false:true">
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                            <el-button size="small" type="text" icon="el-icon-edit"
                                       @click="handleEdit(scope.row)"></el-button>
                        </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                        <el-button size="small" type="text" icon="el-icon-delete"
                                   @click="handleDelete(scope.row)"></el-button>
                      </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="block" style="margin-top: 10px;position: absolute;right: 0;">
                <el-pagination :page-sizes="[10]" :page-size="listQuery.pageSize"
                               layout="total, sizes, prev, pager, next, jumper" :total="total"
                               @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>


        <!--新增或修改框-->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" width="40%">
            <el-form ref="form" :rules="rules" :model="form" label-position="left" label-width="80px">
                <el-form-item label="账号" prop="username">
                    <el-input size="small" v-model="form.username" placeholder="请输入账号"
                               style="width: 70%;"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input size="small" v-model="form.password" placeholder="请输入密码" show-password style="width: 70%;"
                    />
                </el-form-item>
                <el-form-item label="所属角色" prop="roleId">
                    <el-select size="small" style="width: 45%;" v-model="form.roleId" class="filter-item"
                               placeholder="请选择所属角色" filterable>
                      <el-option label="管理员" value="1"></el-option>
                      <el-option label="药房工作人员" value="2"></el-option>
                      <el-option label="药品管理人员" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电话号码" prop="phone">
                    <el-input size="small" style="width: 70%;"  :disabled="dialogStatus != 'create'?true:false" v-model="form.phone" placeholder="请输入电话号码"/>
                </el-form-item>
                <el-form-item label="工号" prop="number">
                    <el-input size="small" style="width: 70%;"  :disabled="dialogStatus != 'create'?true:false" v-model="form.number" placeholder="请输入电话号码"/>
                </el-form-item >
                <el-form-item label="职称" prop="title">
                    <el-select size="small" style="width: 45%;" v-model="form.title" class="filter-item"
                               placeholder="请选择职称" filterable>
                      <el-option label="初级" value="初级"></el-option>
                      <el-option label="中级" value="中级"></el-option>
                      <el-option label="高级" value="高级"></el-option>
                    </el-select>
                </el-form-item> 

              <el-form-item label="年龄" prop="age">
                <el-input size="small" style="width: 70%;" v-model="form.age" placeholder="请输入电话号码"/>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取消</el-button>
                <el-button size="small" type="primary" @click="submit('form')">确定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "user",
        data() {
            return {
                labelPosition: 'left',
                listQuery: {
                    pageNum: 1,
                    pageSize: 10
                },
                loading: true,
                list: [],
                total: undefined,
                dialogVisible: false,
                form: {
                    id: undefined
                },
                //角色项
                roleOptions: [],
                //部门项
                deptOptions: [],
                //校验
                rules: {
                    username: [{required: true, message: '请输入账号', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                    roleId: [{required: true, message: '请选择角色', trigger: 'blur'}],
                    phone: [{required: true, message: '请输入电话', trigger: 'blur'}],
                    number: [{required: true, message: '请输入工号', trigger: 'blur'}],
                    title: [{required: true, message: '请输入职称', trigger: 'blur'}],
                },
                dialogStatus: "",
                textMap: {
                    update: "编辑用户",
                    create: "新增用户"
                },
            }
        },
        methods: {
            //获取列表
            getList() {
                this.$post("/user/list", this.listQuery).then(res => {
                    if (res.code == 200) {
                        this.loading = false;
                        this.list = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            //删除
          handleDelete(row){
            this.$confirm('此操作删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$get('/user/delete', {userId: row.id}).then(res => {
                //console.log(res);
                if (res.code == 200) {
                    this.$message.success("删除成功");
                    this.getList();
                }else{
                    this.$message.error(res.msg);
                }
                });
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });          
            });

          },
        //查询
        search() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        handleRole(){
            this.$router.push("/role");
        },
        //新增
        handleAdd() {
            this.dialogStatus = "create";
            this.form = {};
            this.dialogVisible = true;
        },
        //编辑
        handleEdit(row) {
            this.dialogStatus = "update";
            this.$get('/user/getDetail', {userId: row.id}).then(res => {
                //console.log(res);
                if (res.code == 200) {
                    this.form = res.data;
                }
            })
            this.dialogVisible = true;
        },
        //提交
        submit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post("/user/save", this.form).then(res => {
                        if (res.code == 200) {
                            this.$message.success("操作成功");
                            //关闭对话框
                            this.dialogVisible = false;
                            //重新渲染数据
                            this.getList();
                        }
                        else {
                            this.$message.error(res.msg);
                        }
                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //清空搜索条件
        resetQuery(formName) {
            this.$refs[formName].resetFields();
        },
        //分页改变
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        }
        },
        created() {
            this.getList();
        }
    }
</script>

<style scoped>
    #table {
        padding: 0 20px;
    }

    #search {
        padding: 20px;
    }
    .item{
        margin-left: 10px;
    }
</style>
